<script setup>
import { NodeToolbar } from '@vue-flow/node-toolbar';
import { Position } from '@vue-flow/core';
import { computed } from 'vue';

const props = defineProps({
  data: { type: Object, required: true },
  selected: { type: Boolean, default: false }
});

const nodeStyle = computed(() => ({
  background: '#2196F3',
  color: 'white',
  border: props.selected ? '2px solid #2196F3' : '1px solid #1976D2',
  borderRadius: '4px',
  padding: '10px',
  width: '150px',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  fontSize: '14px',
  fontWeight: 'bold'
}));
</script>

<template>
  <div :style="nodeStyle">
    <NodeToolbar v-if="selected" position="top">
      <!-- 工具栏内容 -->
    </NodeToolbar>
    While循环
    <div class="handle input" data-handle-id="target" data-handlepos="top"></div>
    <div class="handle output" data-handle-id="source" data-handlepos="bottom"></div>
  </div>
</template>

<style scoped>
.handle {
  width: 10px;
  height: 10px;
  background: #1a192b;
  border: 1px solid white;
  border-radius: 50%;
  position: absolute;
}

.input {
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
}

.output {
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
}
</style>